<template>
  <div class="flex alcenter jscenter vh100 login-main">
    <div class="bgpart radius4 plr60 ptb40 mb50 w25 mwidth">
      <div class="tc ft20 color-b0b8db" slot="title">{{ $t('forgot password') }}</div>
      <div class="mt40">
        <div class="bdbea2 flex alcenter bold">
          <div class="pb10 mr20 pointer ft14 active2px">{{ $t('E-mail retrieved') }}</div>
        </div>
      </div>
      <a-form-model :model="form" ref="ruleForm" :rules="rules" class="mt20">
        <a-form-model-item prop="email">
          <a-input
            v-model="form.email"
            :placeholder="$t('Please enter your email')"
            class="flex1 h100 nwhite ft14"
          />
        </a-form-model-item>
        <a-form-model-item prop="code">
          <a-input
            v-model="form.code"
            :placeholder="$t('Please enter the verification code')"
            class="flex1 h100 nwhite ft14"
          >
            <a-button
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              slot="suffix"
              type="link"
            >
              {{ (!state.smsSendBtn && 'Send') || state.time + ' s' }}
            </a-button>
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password
            v-model="form.password"
            :placeholder="$t('Please enter the password')"
            class="flex1 h100 nwhite ft14"
          />
        </a-form-model-item>
        <!-- <a-form-model-item prop="againPassword">
          <a-input-password
            v-model="form.againPassword"
            :placeholder="$t('Please enter the password again')"
            class="flex1 h100 nwhite ft14"
          />
        </a-form-model-item> -->
        <a-form-model-item>
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button text-color mt40"
            :loading="state.loading"
            block
            @click="onSubmit"
          >
            {{ $t('Confirm') }}
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import { getCode, resetPassword } from '@/api/sys'
export default {
  data() {
    return {
      form: {
        email: '',
        password: '',
        code: ''
      },
      rules: {
        email: [{ required: true, message: this.$t('Plaease input your email') }],
        password: [{ required: true, message: this.$t('"Please enter the password"') }],
        code: [{ required: true, message: this.$t('Please enter the verification code') }],
        // againPassword: [{ required: true, message: this.$t('Please enter the password again') }]
      },
      rememberMe: false,
      state: {
        smsSendBtn: false,
        time: 120,
        loading: false
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
      this.$refs.ruleForm.validate((valid) => {
        // console.log(valid, "jiangege1993@gmail.com");
        if (valid) {
          this.state.loading = true
          resetPassword(this.form)
            .then(() => {
              this.state.loading = false
              this.$notification.success({
                message: this.$t('提示'),
                description: this.$t('Successfully saved')
              })
              this.$router.replace({ path: '/' })
            })
            .catch(() => {
              // console.log(err, "jiangege1993@gmail.com");
              this.state.loading = false
            })
        }
      })
    },
    forgetPasswordHandler() {
      this.$router.push({ path: '/forgetPassword' })
    },
    getCaptcha(e) {
      e.preventDefault()
      const {
        form,
        state
      } = this

      this.$refs.ruleForm.validateField('email', (err) => {
        if (!err) {
          state.smsSendBtn = true

          const interval = window.setInterval(() => {
            if (state.time-- <= 0) {
              state.time = 120
              state.smsSendBtn = false
              window.clearInterval(interval)
            }
          }, 1000)

          // const hide = this.$message.loading('验证码发送中..', 0)
          getCode({ email: form.email, type: 2 })
            .then(() => {
              this.$notification['success']({
                message: this.$t('提示'),
                description: this.$t('验证码发送成功')
              })
              // setTimeout(hide, 2500)
              // this.$notification['success']({
              //   message: '提示',
              //   description: '验证码获取成功，您的验证码为：' + res.result.captcha,
              //   duration: 8
              // })
            })
            .catch((err) => {
              console.log(err, 'error')
              // setTimeout(hide, 1)
              // clearInterval(interval)
              // state.time = 60
              // state.smsSendBtn = false
              // this.requestFailed(err)
            })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mwidth {
  min-width: 440px;
}
.color-b0b8db {
  color: #b0b8db;
}
:deep.ant-btn-link[disabled]{
  color: #FCD535;
}
// .login-main{
:deep.ant-input,
:deep.ant-input-password .ant-input,
:deep.ant-input-affix-wrapper .ant-input {
  height: 50px;
  background-color: transparent;
}
// :deep.has-error .ant-input, :deep.has-error .ant-input-password .ant-input{
//   &:focus, &:hover{
//     background-color: #f5222d;
//   }
// }
// }

.getCaptcha {
  // display: block;
  // width: 120px;
  // height: 50px;
  // line-height: 50px;
  // position: absolute;
  // right: 1px;
  // top: -17px;
  // border: none;
  // border-radius: 28px !important;
}
</style>
